<template>
  <view class="vote">
    <view class="vote-card">
      <navigator
        v-for="item in data"
        :key="item.id"
        :url="`/pages/vote/index?id=${item.id}`"
        open-type="navigate"
        hover-class="navigator-hover"
        class="vote-item"
        @tap="handleSelectedVote(item)"
      >
        <image :src="item.cover" mode="scaleToFill" class="vote-card-img" />
        <text class="vote-card-title">{{ item.tittle }}</text>
        <view class="vote-card-footer">
          <text class="vote-card-part-num">参与数: {{ item.pnum }}</text>
          <text class="vote-card-vote-count">投票数: {{ item.vnum }}</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import { voteListResponseType } from "@/types/vote";
import { useUserStore } from "@/stores";
import { handleCoverToImageList } from "@/utils/vote";

const data: any = defineModel();

const userStore = useUserStore();

const handleSelectedVote = (item: voteListResponseType) => {
  userStore.selectedVote = item;
  userStore.selectedVote.images = handleCoverToImageList(item.cover);
};
</script>

<style setup lang="scss">
.vote {
  background-color: #ebebeb;
  padding: 0 20rpx;
  .vote-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .vote-item {
      width: 308rpx;
      padding: 20rpx;
      margin-top: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      border: 1px solid #ebeef5;
      .vote-card-img {
        width: 308rpx;
        height: 308rpx;
      }
      .vote-card-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-top: 12rpx;
      }
      .vote-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8rpx;
        .vote-card-vote-count {
          font-size: 22rpx;
          color: #999;
        }
        .vote-card-part-num {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
